<template>
    <div class="doubao-chat-container bg-gray-50 min-h-screen">
        <!-- 头部区域 -->
        <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold">
                    豆
                </div>
                <h1 class="text-xl font-semibold text-gray-800">豆包聊天助手</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="text-gray-500 hover:text-gray-700 transition-colors">
                    <i class="fa fa-history"></i>
                </button>
                <button class="text-gray-500 hover:text-gray-700 transition-colors">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </header>

        <!-- 聊天内容区域 -->
        <main class="max-w-4xl mx-auto px-4 py-6 flex-grow">
            <div class="chat-messages space-y-4" ref="messagesContainer">
                <!-- 系统消息 -->
                <div class="system-message py-2 px-4 bg-blue-50 rounded-lg text-center">
                    <p class="text-sm text-gray-600">欢迎使用豆包聊天助手，有什么可以帮助您？</p>
                </div>

                <!-- 用户消息 -->
                <div class="user-message flex items-start space-x-3" v-for="(message, index) in messages" :key="index"
                    :class="{ 'user': message.type === 'user', 'bot': message.type === 'bot' }">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-medium"
                        v-if="message.type === 'user'">
                        你
                    </div>
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-medium"
                        v-else>
                        豆
                    </div>
                    <div class="message-content flex-grow">
                        <div class="bg-white rounded-lg p-4 shadow-sm max-w-[80%] inline-block">
                            <pre class="whitespace-pre-wrap break-words text-gray-800">{{ message.content }}</pre>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">
                            {{ formatTime(message.timestamp) }}
                        </div>
                    </div>
                </div>

                <!-- 加载状态 -->
                <div class="bot-message flex items-start space-x-3" v-if="isLoading">
                    <div
                        class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-medium">
                        豆
                    </div>
                    <div class="message-content flex-grow">
                        <div class="bg-white rounded-lg p-4 shadow-sm max-w-[80%] inline-block">
                            <div class="flex space-x-1">
                                <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div>
                                <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"
                                    style="animation-delay: 0.2s"></div>
                                <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"
                                    style="animation-delay: 0.4s"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 输入区域 -->
        <footer class="bg-white border-t border-gray-200 py-4 px-6 fixed bottom-0 left-0 right-0">
            <div class="max-w-4xl mx-auto">
                <div class="relative">
                    <textarea v-model="inputMessage" placeholder="输入您的问题..."
                        class="w-full border border-gray-300 rounded-lg p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none transition-all"
                        rows="1" @input="autoResizeTextarea" @keydown.enter="sendMessage"></textarea>
                    <button :disabled="!inputMessage.trim()" @click="sendMessage"
                        class="absolute right-3 bottom-3 text-primary hover:text-primary/80 transition-colors">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
                <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
                    <div>支持markdown语法</div>
                    <div>按Enter发送消息</div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
export default {
    name: 'doubaoChat',
    data() {
        return {
            messages: [
                {
                    type: 'bot',
                    content: '你好！我是豆包编程助手，有什么可以帮助您？',
                    timestamp: new Date()
                }
            ],
            inputMessage: '',
            isLoading: false
        }
    },
    mounted() {
        this.scrollToBottom();
    },
    methods: {
        sendMessage() {
            const message = this.inputMessage.trim();
            if (!message) return;

            // 添加用户消息
            this.messages.push({
                type: 'user',
                content: message,
                timestamp: new Date()
            });

            // 清空输入框
            this.inputMessage = '';

            // 滚动到底部
            this.scrollToBottom();

            // 模拟加载状态
            this.isLoading = true;

            // 模拟AI回复延迟
            setTimeout(() => {
                this.isLoading = false;
                this.messages.push({
                    type: 'bot',
                    content: '感谢您的提问！这是豆包为您生成的回答内容。由于这是一个演示，实际使用时这里会是AI生成的回复。',
                    timestamp: new Date()
                });
                this.scrollToBottom();
            }, 1500);
        },
        scrollToBottom() {
            const container = this.$refs.messagesContainer;
            if (container) {
                container.scrollTop = container.scrollHeight;
            }
        },
        autoResizeTextarea() {
            const textarea = event.target;
            textarea.style.height = 'auto';
            textarea.style.height = (textarea.scrollHeight) + 'px';
            textarea.style.maxHeight = '150px';
        },
        formatTime(timestamp) {
            const date = new Date(timestamp);
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${hours}:${minutes}`;
        }
    }
}
</script>

<style scoped>
:root {
    --primary: #4F46E5;
}

.system-message {
    animation: fadeIn 0.5s ease-in-out;
}

.user-message,
.bot-message {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-messages {
    min-height: calc(100vh - 200px);
}
</style>